<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片</title>
</head>
<body>
<canvas id="canvas" width="420" height="330" style="border: 1px solid #000"></canvas>
<script>
      const canvas = document.getElementById('canvas');
      const ctx = canvas.getContext('2d');
      const img  = new Image();
      img.addEventListener('load', () => {
        ctx.drawImage(img,
          10, // x轴的位置
          10  // y轴的文职
        );
        ctx.drawImage(img, 210, 10,
          80, // 图片的宽度
          150 // 图片的高度
        );
        ctx.drawImage(img,
          80,  // 开始剪切的 x 坐标位置。
          130, // 开始剪切的 y 坐标位置。
          40,  // 被剪切图像的宽度。
          100, // 被剪切图像的高度。
          320, // 在画布上放置图像的 x 坐标位置。
          10,  // 在画布上放置图像的 y 坐标位置。
          80,  // 要使用的图像的宽度。（伸展或缩小图像）
          200  // 要使用的图像的高度。（伸展或缩小图像）
        );
      });
      img.src = '../img/009.jpeg';
</script>
</body>
</html>